@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap");

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: "Poppins", sans-serif;

    --black: #242424;
    --white: #f5f5f5;
    --pill: #e0d4be;
    --red: #cc033f;
}

ul {
    list-style: none;
}

.page-wrap {
    position: relative;
}

header {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

/*  NAV: Top Menu Section
----------------------------------------------- */
nav {
    width: 100%;
    position: fixed;
    z-index: 10;
    padding: 1em 5em;
    display: flex;
    justify-content: space-between;
}

nav h1 {
    font-size: clamp(1.2rem, 6vw, 3rem);
    font-weight: normal;
    text-transform: uppercase;
    color: var(--pill);
    font-size: 1.3rem;
    background-color: #409eff;
    padding: 5px 10px;
}
nav h1 a{
    text-decoration: none;
    /* 去除默认的下划线 */
    outline: none;
    /* 去除旧版浏览器的点击后的外虚线框 */
    color: var(--pill);
    /* 去除默认的颜色和点击后变化的颜色 */
}


#login{
    border-radius: 20px;
    cursor: pointer;
}


nav ul {
    display: flex;
    color: var(--white);
}

nav ul li:not(#burger) {
    visibility: hidden;
    margin-right: 1.5em;
}

#burger {
    width: min-content;
    height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    cursor: pointer;
}

#burger span {
    display: block;
    height: 3px;
    width: 22px;
    background-color: var(--red);
    border-radius: 200px;
    transition: transform 0.3s 0.3s;
}

.active span:nth-of-type(1) {
    transform: translateY(-3px) scaleX(1.3);
}

.active span:nth-of-type(3) {
    transform: translateY(3px) scaleX(1.3);
}

/*  MAIN: Slider Section
----------------------------------------------- */
main {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

article {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--i);
}

.hero-info {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    z-index: 8;
}

.hero-info h2 {
    font-size: clamp(2rem, 9vw, 5rem);
    line-height: clamp(2rem, 9vw, 5rem);
    text-transform: uppercase;
}

.hero-info h1 {
    color: var(--white);
    font-size: clamp(3.2rem, 10vw, 7rem);
    line-height: clamp(3.2rem, 10vw, 7rem);
    text-transform: uppercase;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

.hero-info h3 {
    color: var(--white);
    font-size: 1.6rem;
    font-weight: normal;
    margin-top: 2em;
}

@supports (-webkit-text-stroke: 3px var(--pill)) {
    .hero-info h2 {
        color: transparent;
        -webkit-text-stroke: 3px var(--pill);
        text-shadow: none;
    }
}

.hero-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.hi-1 {
    background-image: url("../images/list/交通01.jpg");
}

/* Photo by Lucas Favre
   https://unsplash.com/photos/BRTV55ErUZg
----------------------------------------------- */
.hi-2 {
    background-image: url("../images/list/交通02.jpg");
}

/* Photo by Roell de Ram
   https://unsplash.com/photos/2DM7eOR5iyc
----------------------------------------------- */
.hi-3 {
    background-image: url("../images/list/交通03.jpg");
}

/* Photo by Go to Bernd Wahlbrinck
   https://unsplash.com/photos/lVVvYiR66kw
----------------------------------------------- */
.hi-4 {
    background-image: url("../images/list/交通04.jpg");
}

/* Photo by Micheal Schofield
   https://unsplash.com/photos/d0ohwP3BRf4
----------------------------------------------- */
.hi-5 {
    background-image: url("../images/list/交通06.jpg");
}

/*  SECTION: Overlay Menu Section
----------------------------------------------- */
section {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    min-height: 100vh;
    padding: 8em 5em 2em 5em;
    background-color: var(--white);
    background-image: url("https://www.transparenttextures.com/patterns/church.png");
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}

.level-1 {
    display: grid;
    grid-template-columns: 65% 1fr;
    grid-auto-rows: min-content;
    grid-gap: 2em;
}

.level-1 h3 {
    font-weight: 600;
    font-size: 1.8rem;
    text-transform: uppercase;
}

.level-1 p {
    margin: 0.5em 0 0 0.5em;
}

.level-1 p small {
    font-size: 1rem;
    opacity: 0.5;
    cursor: pointer;
}

.level-1 p small:hover {
    opacity: 1;
    color: var(--red);
}

.level-1 ul>li {
    font-size: 1.2rem;
    padding: 0.3em;
    transition: color 0.3s;
}

.level-1 ul>li:hover {
    color: var(--red);
    cursor: pointer;
}

.level-1 li:nth-of-type(1) {
    grid-column: 1/2;
    grid-row: 1/4;
}

.level-1 li:nth-of-type(2) {
    grid-column: 2/3;
    grid-row: 1/2;
}

.level-1 li:nth-of-type(3) {
    grid-column: 2/3;
    grid-row: 2/3;
}

.level-1 li:nth-of-type(4) {
    grid-column: 2/3;
    grid-row: 3/4;
}

.level-2 {
    padding: 0.3em 1em;
}

.level-2 li p {
    color: var(--red);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 1em 0;
    text-transform: uppercase;
    border-bottom: 1px solid #fde0ac;
}

.level-3 {
    display: flex;
    flex-wrap: wrap;
}

.level-3 li {
    padding: 0.5em 1em !important;
    background-color: var(--pill);
    border-radius: 500px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 1rem !important;
    cursor: pointer;
    color: var(--black);
}

@media screen and (max-width: 600px) {
    nav {
        padding: 1em 2em;
    }

    nav h1 {
        font-size: 0.9rem;
    }

    section {
        padding: 8em 2em 2em 2em;
    }

    .level-1 {
        grid-template-columns: 1fr;
    }

    .level-1 li:nth-of-type(1) {
        grid-column: 1/2;
        grid-row: 1/2;
    }

    .level-1 li:nth-of-type(2) {
        grid-column: 1/2;
        grid-row: 2/3;
    }

    .level-1 li:nth-of-type(3) {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    .level-1 li:nth-of-type(4) {
        grid-column: 1/2;
        grid-row: 4/5;
    }
}